<template>
  <div class="event1">
    <h3>我是event3组件</h3>
    <span v-for="item in numArr" :key="item">{{ item }}</span>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, reactive } from "vue";
import mittBus from "@/utils/mittBus";

let numArr = reactive([]);

onMounted(() => {
  mittBus.on("emit-brother", arr => {
    console.log("arr", arr);
    // Vue3.0不能直接对数组进行赋值
    numArr.length = 0; // 清空原数组
    numArr.push(...arr);
  });
  console.log("生命周期onMounted", mittBus);
});
onUnmounted(() => {
  //   mittBus.all.clear();
  mittBus.off("emit-brother");
  console.log("生命周期onUnmounted", mittBus);
});
</script>

<style scoped lang="scss">
.event1 {
  height: 200px;
  width: 400px;
  background: gray;
}
</style>
